<template>
  <div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
// 1.引入echarts
// 注意：echarts 需要通过require引入，因为它是通过exports导出的(后端导出)
// watch:可以监听computed中的数据
import {} from "../../http/api";
// import echarts from 'echarts'
// 2.进入vuex中的catelist
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions({
      reqList: "cate/reqList"
    })
  },
  computed: {
    ...mapGetters({
      list: "cate/list"
    })
  },
  mounted() {
    // 一进页面就发起求
    this.reqList();
    /* 
    list: Array(4)
0:
catename: "家用电器"
children: Array(3)
0:
catename: "剃须刀"
id: 35
img: "/uploads/category/35eb52e0-3e16-11ec-870c-43025268d152.jpg"
pid: 33
status: 1
    */
    // 挂载完成才能用到节点---->放到了watch中
  },
  watch: {
    // 监听数据，数据回来才画图
    list: {
      handler() {
        if (this.list.length > 0) {
          // 基于准备好的dom，初始化echarts实例
          var myChart = require("echarts").init(
            document.getElementById("main")
          );

          // 指定图表的配置项和数据
          var option = {
            title: {
              text: "商品分类"
            },
            color:['red'],
            tooltip: {},
            legend: {
              data: ["子类数量"]
            },
            xAxis: {
              data: this.list.map(item => item.catename)
            },
            yAxis: {},
            series: [
              {
                name: "子类数量",
                type: "line",
                data: this.list.map(item=>{
                  return item.children ? item.children.length : 0
                })
              }
            ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      },
      // 深度监听
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
#main {
  margin: 20px auto;
  border: 2px solid blue;
}
</style>